<template>
	<!-- 新建差旅报销单  -->
	<view class="container"
		style="width: 100%;box-sizing: border-box;background-color: #fff;padding:20rpx 20rpx 20rpx 20rpx">
		<uni-forms ref="form" :modelValue="entity" label-width="130px">
			<view>
				<view>
					<uni-section title="基本信息" type="line"></uni-section>
				</view>
				<uni-forms-item label="报销单号:" name="ReimburseCode">
					<view>
						<uni-easyinput v-model="entity.ReimburseCode" :disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="报销单名称:" name="ReimburseName">
					<view>
						<uni-easyinput v-model="entity.ReimburseName" :disabled="disabled" />
					</view>
				</uni-forms-item>

				<uni-forms-item label="申请日期:" :rules="$rules.handle.ApplicationDate" required name="ApplicationDate">
					<view @click="DateChange($event, 'ApplicationDate')">
						<uni-easyinput v-model="entity.ApplicationDate" :disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="公司名称:" :rules="$rules.handle.CompanyName" required name="CompanyName">
					<view @click="CustomerChoice('CompanyName')">
						<uni-easyinput v-model="entity.CompanyName" suffixIcon="compose" :disabled="disabled" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="部门名称:" :rules="$rules.handle.DeptName" required name="DeptName">
					<view @click="CustomerChoice('DeptName')">
						<uni-easyinput v-model="entity.DeptName" suffixIcon="compose" :disabled="disabledDeptName" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="报销人姓名:" :rules="$rules.handle.ApplicationPerson" required
					name="ApplicationPerson">
					<view>
						<uni-easyinput v-model="entity.ApplicationPerson" :disabled="disabled" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="出发城市:" :rules="$rules.handle.DepartureCityName" required
					name="DepartureCityName">
					<uni-data-picker popup-title="请选择出发城市" :localdata="dataTree"
						@change="pickerChange($event, 'DepartureCityName')" :inputBorder="false"
						v-model="entity.DepartureCityName">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="出发日期:" :rules="$rules.handle.DepartureDate" required name="DepartureDate">
					<view @click="DateChange($event, 'DepartureDate')">
						<uni-easyinput v-model="entity.DepartureDate" :disabled="true" :inputBorder="false" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="上下午:" :rules="$rules.handle.DepartureAMPM" required name="DepartureAMPM">
					<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
						v-model="entity.DepartureAMPM" :localdata="DepartureAMPMOptions"
						@change="selectOptionsChange($event, 'DepartureAMPM')" :disabled="disabled"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="返回日期:" :rules="$rules.handle.ReturnDate" required name="ReturnDate">
					<view @click="DateChange($event,'ReturnDate')">
						<uni-easyinput v-model="entity.ReturnDate" :disabled="true" :inputBorder="false" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="上下午:" :rules="$rules.handle.ArrivalAMPM" required name="ArrivalAMPM">
					<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
						v-model="entity.ArrivalAMPM" :localdata="ArrivalAMPMOptions"
						@change="selectOptionsChange($event, 'ArrivalAMPM')" :disabled="disabled"></uni-data-select>
				</uni-forms-item>

				<uni-forms-item label="票面总金额:" name="FaceAmount">
					<view>
						<uni-easyinput v-model="entity.FaceAmount" :disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="报销总金额:" name="ReimburseAmount">
					<view>
						<uni-easyinput v-model="entity.ReimburseAmount" :disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="出差天数:" name="TravelDays">
					<view>
						<uni-easyinput v-model="entity.TravelDays" :inputBorder="false" :disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="补贴基数:" name="SubsidyBase">
					<view>
						<uni-easyinput v-model="entity.SubsidyBase" :inputBorder="false" :disabled="true" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="出差补贴:" name="TravelAllowance">
					<view>
						<uni-easyinput v-model="entity.TravelAllowance" :disabled="true" />
					</view>
				</uni-forms-item>

				<uni-forms-item label="财务摘要:">
					<view>
						<uni-easyinput v-model="entity.Abstract" type="textarea" maxlength="300" :disabled="disabled" />
					</view>
				</uni-forms-item>
			</view>

			<!-- 添加行程明细 -->
			<view class="flex  Jbetween">
				<uni-section title="行程信息" type="line"></uni-section>
				<view class="flex Acenter Jbetween" @click="AddDetailClick">
					<u-icon name="plus-circle-fill" color="#2979ff" size="45"></u-icon>
					<text style="color:#2979ff;font-weight:bold;padding-left: 10rpx;">{{addButton}}</text>

				</view>
			</view>

			<view class="scrollBox">
				<scroll-view style="width: 100%;height: 100%;" scroll-y="true">
					<view style="padding-bottom: 50px;">
						<view class="detail" v-for="(item, index) in tripDetailData" :key="index">
							<view class="" style="font-size: 14px">
								<span class="font" style="margin-right: 30rpx;"># {{ index +1 }}</span>
								<view class="flex Jbetween">
									<span class="font">行程名称: {{item.ItineraryName}}</span>
									<span class="font">交通方式:
										{{item.ModeTransportationName }}</span>
								</view>

								<view class="flex Jbetween">
									<span class="font">到达城市: {{item.newArrivalCityIdName}}</span>
									<span class="font">到达日期: {{ item.ArrivalDate}}</span>
								</view>
								<view class="flex Jbetween">
									<span class="font">关联客户: {{ item.CustomerName}}</span>
								</view>
								<view class="flex Jbetween">
									<span class="font">客户拜访说明: {{item.Infor}}</span>
								</view>
							</view>
							<view class="flex Jend">
								<view @click.stop="handleItemEdit(entity, item, index)" style="
								  width: 15%;
								  border-radius: 5px;
								  line-height: 30px;
								  color: #fff;
								  text-align: center;
								  margin-top: 10rpx;
								  background-color: #2979ff;
								  margin-right: 30rpx;
								">
									修改
								</view>
								<view @click="detailDataDelete([item.Id], index)" style="
							  width: 15%;
							  border-radius: 5px;
							  line-height: 30px;
							  color: #fff;
							  text-align: center;
							  background-color: red;
							  margin-top: 10rpx;
							">
									删除
								</view>
							</view>
						</view>
						<view style="margin: 50rpx 0;">
							<u-empty v-if="tripDetailData.length==0" text="请添加行程" mode="list"></u-empty>
						</view>
					</view>

				</scroll-view>
			</view>
			<view v-if="disabled">
				<!-- v-if="tripDetailData.length>0" -->
				<view class="submitButton" style="display: flex;align-items: center;">
					<u-button type="default" plain style="font-size: 14px;width: 200rpx;" @click="urlBack"
						:loading="loading">返回</u-button>
					<u-button type="primary" style="font-size: 14px;width: 200rpx;" @click="onSubmit(2)"
						:loading="loading">审批</u-button>
				</view>
			</view>
			<view v-else>
				<!-- v-if="tripDetailData.length>0"  -->
				<view class="submitButton" style="display: flex;align-items: center;">
					<u-button type="primary" plain style="font-size: 14px;width: 200rpx;" @click="onSubmit(0)"
						:loading="loading">保存草稿</u-button>
					<u-button type="primary" style="font-size: 14px;width: 200rpx;" @click="onSubmit(1)"
						:disabled="isButtonDisabled" :loading="loading">提交</u-button>
				</view>
			</view>
		</uni-forms>
		<!-- 选择日期 -->
		<u-calendar v-model="isCalendar" :mode="mode" @change="calendarChange"></u-calendar>
		<!-- 引用公司子组件 -->
		<Company ref="Company" @change="changeHandler" @cancel="$refs.Company.close()" :title="title"></Company>
	</view>
</template>

<script>
	// 开始日期上下午
	const DepartureAMPMOptions = [{
			value: 1,
			text: '上午'
		},
		{
			value: 2,
			text: '下午'
		}
	]
	// 结束日期上下午
	const ArrivalAMPMOptions = [{
			value: 1,
			text: '上午'
		},
		{
			value: 2,
			text: '下午'
		}
	]
	import {
		mapState
	} from "vuex";
	// 引用公司选择子组件
	import Company from '@/components/Company.vue'
	import AddDetail from './AddDetail.vue';
	// 引用报销明细和补贴明细
	import ApplyReimDetails from './TravelDetailList/ApplyReimDetails.vue';
	import SubsidyDetails from './TravelDetailList/SubsidyDetails.vue'
	// 引入公共头部组件
	import {
		//获取公司列表数据
		CompanyDataList,
		// 获取部门下拉列表
		DepartmentList,
		// 差旅保存修改 临时保存草稿
		Reimburse_Travel_Business_MainSaveData,
		// 判断姓名是否存在人员档案中
		Base_UserGetExistEmployee
	} from "@/api/interface.js";
	export default {
		components: {
			// 公司组件
			Company,
			// 新增明细表单组件
			AddDetail,
			// 报销明细
			ApplyReimDetails,
			// 补贴明细
			SubsidyDetails
		},
		data() {
			return {
				// 出发日期上下午
				DepartureAMPMOptions,
				// 返回日期上下午
				ArrivalAMPMOptions,
				// 添加明细按钮类别
				addButton: "添加行程与客户拜访",
				// 是否允许提交按钮
				isButtonDisabled: false,
				// 公司和部门弹窗的标题
				title: "请选择公司",
				// 顶部导航栏切换
				tabsList: [{
					name: '行程信息'
				}, {
					name: '报销明细'
				}],
				// 出发城市地区树结构
				dataTree: [],
				// 默认选中tab
				currentIndex: 0,
				// 禁用
				disabled: false,
				// 禁用部门名称
				disabledDeptName: false,
				// 加载
				loading: false,
				entity: {
					// 票面总金额
					FaceAmount: '',
					// 报销总金额
					ReimburseAmount: '',
					// ********************************************默认赋值空值  否则提交会有校验不通过问题********************************************
					DeptName: ""

				},
				// 交通方式下拉列表数据
				ModeTransportationOptions: [{
					value: 1,
					text: '飞机'
				}, {
					value: 2,
					text: '火车'
				}, {
					value: 3,
					text: '自驾'
				}],
				// 是否显示日期弹窗
				isCalendar: false,
				// 日期选择
				mode: 'date',
				// 是否展示公司选择底部弹窗组件
				showPopup: false,
				// 底部弹窗列表数据
				columns: [],
				// 点击弹出底部弹窗的字段类型
				dataType: "",
				options: {},
				// 行程子表
				tripDetailData: [],
				// 报销子表
				detailData: [],
				// 补贴明细
				subDetailData: [],
				// 附件列表
				reimburse_Files: [],
				Upload: [],
				// 报销子表编辑点击下标当前行
				detailDataIndex: 0,
				// 补贴子表编辑点击下标当前行
				subDetailDataIndex: 0


			}
		},
		computed: {
			...mapState(["UserInfo", "BillTypeOptions", "ExpenseTypeOptions", "InvoiceClassificationOptions",
				"CompayListOptions", "Base_DistrictGetTreeDataTListOptions"
			]),
		},
		onShow() {
			//默认赋值当前选择日期
			let time = this.$moment().format("YYYY-MM-DD");
			this.entity.ApplicationDate = time
		},
		onLoad(options) {
			// 城市的确树结构
			this.dataTree = this.Base_DistrictGetTreeDataTListOptions
			// 补贴基数赋值
			this.entity.SubsidyBase = this.UserInfo.UserInfo.TravelSubsidyBase
			this.options = options
			// 公司名称
			let CompanyName = this.CompayListOptions.filter(item => item.value === this.UserInfo.UserInfo.CompanyId)[0]
				.text
			// 公司id
			let CompanyId = this.CompayListOptions.filter(item => item.value === this.UserInfo.UserInfo.CompanyId)[0]
				.value
			// 默认取当前用户公司名称和id
			this.$set(this.entity, 'CompanyName', CompanyName)
			this.$set(this.entity, 'CompanyId', CompanyId)
			// 报销人姓名默认赋值
			this.$set(this.entity, 'ApplicationPerson', this.UserInfo.UserInfo.StaffName)
			if (this.entity.CompanyId) {
				// 默认取当前公司id下的部门名称和id
				// 获取部门下拉列表
				this.getDepartmentList('默认', CompanyId)
			}
		},

		methods: {
			// 返回
			urlBack() {
				uni.navigateBack()
			},
			// 日期时间选择
			DateChange(event, type) {
				this.dataType = type
				// if (this.disabled) return
				this.isCalendar = true
			},
			// 日期选择calendarChange
			calendarChange(event) {

				// *************注意  存储必须用set赋值  否则校验不通过   ************************************
				this.$set(this.entity, this.dataType, event.result);
				// *************注意  存储必须用set赋值  否则校验不通过   ************************************

				//当前选择日期
				// 判断出发和返回日期比较
				// let ApplicationDate = new Date(this.$moment().format("YYYY-MM-DD"));
				console.log('确认日期了', this.entity, event, this.DateType)
				// 判断开始日期是否大于当天日期
				if (this.entity.DepartureDate && this.entity.ReturnDate) {
					// 出发日期
					let DepartureDate = new Date(this.entity.DepartureDate);
					// 返回日期
					let ReturnDate = new Date(this.entity.ReturnDate);
					if (DepartureDate > ReturnDate) {
						this.$errorToast('出发日期不能大于返回日期')
						if (this.DateType === 'DepartureDate') {
							delete this.entity.DepartureDate
						} else {
							delete this.entity.ReturnDate
						}
						return
					}
				}

				// 根据日期和上下午 判断天数
				let additionalDays = 0
				if (this.entity.DepartureAMPM == 1 && this.entity.ArrivalAMPM == 1) {
					additionalDays += 0.5
				} else if (this.entity.DepartureAMPM == 2 && this.entity.ArrivalAMPM == 2) {
					additionalDays += 0.5
				} else if (this.entity.DepartureAMPM == 1 && this.entity.ArrivalAMPM == 2) {
					additionalDays += 1
				}
				if (this.entity.DepartureDate && this.entity.ReturnDate) {
					const totalDays = Number(this.getDiffDay(this.entity.DepartureDate, this.entity.ReturnDate)) +
						additionalDays
					// 自动计算出差补贴   补贴基数*出差天数
					this.entity.TravelAllowance = totalDays * this.entity.SubsidyBase
					// 赋值当前行的出差天数
					this.entity.TravelDays = totalDays
				}

				console.log('选择日期确定了', event, this.dataType, this.entity)
			},
			// 出发城市和到达城市
			pickerChange(event, key) {
				console.log('出发城市选择了', event, key, this.entity)
				let arr = event.detail.value
				// 出发城市名称
				let DepartureCityName = arr.map(item => {
					return item.text
				}).join('/')
				// 出发城市id
				let DepartureCity = arr.map(item => {
					return item.value
				}).join('/')
				this.$set(this.entity, 'newDepartureCity', DepartureCity)
				this.$set(this.entity, 'newDepartureCityName', DepartureCityName)
				this.$set(this.entity, 'DepartureCityName', event.detail.value)
			},
			getDiffDay(date_1, date_2) {
				// 计算两个日期之间的差值
				let totalDays, diffDate
				const myDate_1 = Date.parse(date_1)
				const myDate_2 = Date.parse(date_2)
				// 将两个日期都转换为毫秒格式，然后做差
				diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
				totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
				// console.log(totalDays)
				return totalDays // 相差的天数
			},
			// 上午下午下拉改变事件
			selectOptionsChange(event, key) {

				let optionsArr = []

				if (key === 'DepartureAMPM') {
					// 开始日期上下午
					optionsArr = this.DepartureAMPMOptions
				} else {
					//结束日期上下午
					optionsArr = this.ArrivalAMPMOptions
				}
				// 上下午名称
				let Name = optionsArr.filter(item => item.value === event)[0].text
				this.$set(this.entity, key + 'Name', Name)
				// 根据日期和上下午 判断天数
				let additionalDays = 0
				if (this.entity.DepartureAMPM == 1 && this.entity.ArrivalAMPM == 1) {
					additionalDays += 0.5
				} else if (this.entity.DepartureAMPM == 2 && this.entity.ArrivalAMPM == 2) {
					additionalDays += 0.5
				} else if (this.entity.DepartureAMPM == 1 && this.entity.ArrivalAMPM == 2) {
					additionalDays += 1
				}
				if (this.entity.DepartureDate && this.entity.ReturnDate) {
					const totalDays = Number(this.getDiffDay(this.entity.DepartureDate, this.entity.ReturnDate)) +
						additionalDays
					// 自动计算出差补贴   补贴基数*出差天数
					this.entity.TravelAllowance = totalDays * this.entity.SubsidyBase
					// 赋值当前行的出差天数
					this.entity.TravelDays = totalDays
				}
				// // 同时计算应付金额 = 报销总金额 + 出差补贴
				this.entity.PayableAmount = this.entity.ReimburseAmount + this.entity.TravelAllowance
				console.log('上下午选择改变了', event, key, this.entity)
			},
			// 行程子表编辑
			handleItemEdit(entity, item, index) {
				console.log('行程子表编辑', entity, item, index)

				let data = {
					entity: entity,
					item: item
				}
				this.detailDataIndex = index
				uni.setStorageSync('entity', data)
				uni.navigateTo({
					url: "/pages/Approval/EditDetailTrip"
				})
			},
			// 行程子表删除
			detailDataDelete(type, event, index) {
				console.log('行程子表开始删除了------------', type, event, index)
				this.tripDetailData.splice(index, 1)
				// 重新计算总金额
				this.getTotalAmount()
			},
			// push报销明细子表
			setDetailData(type, key, data) {
				console.log('行程里的费用明细---------------------------子表过来的--------', type, key, data)
				// 处理到达城市数组回显字符串
				// if (typeof(data.ArrivalCityIdName) === 'object') {
				// 	data.ArrivalCityIdName = data.ArrivalCityIdName.map(item => {
				// 		return item.text
				// 	}).join('/')
				// }
				if (type === 'add') {
					this.tripDetailData.push(data)
					console.log('新增过来的行程信息', data, this.tripDetailData)
				} else {
					let tripDetailData = this.tripDetailData

					tripDetailData.forEach((item, index) => {
						if (item.Id && item.Id === data.Id) {
							tripDetailData[index] = data
						} else {
							// 替换数组里对应对象
							this.tripDetailData.splice(this.detailDataIndex, 1, data)
						}
					})
					console.log('编辑过来的行程信息', data, tripDetailData)
				}
				// 计算票面总金额和报销总金额
				this.getTotalAmount()
				this.$forceUpdate()
			},
			// 求和函数
			sumObjects(arr, key) {
				return arr.reduce((sum, current) => sum + parseFloat(current[key] || 0), 0)
			},

			// 计算票面总金额和报销总金额
			getTotalAmount() {

				this.tripDetailData.forEach(item => {
					if (item.detailData && item.detailData.length > 0) {
						// 计算票面总金额
						const newFaceAmount = this.sumObjects(item.detailData, 'FaceAmount')
						// 计算报销总金额
						const newReimburseAmount = this.sumObjects(item.detailData, 'ReimburseAmount')
						// 计算差额
						const totalDifference = newFaceAmount - newReimburseAmount
						// 票面总金额和报销总金额赋值entity
						// 每一个的报销金额
						item.newFaceAmount = newFaceAmount
						// 每一个的报销金额
						item.newReimburseAmount = newReimburseAmount
						// 每一个的应付金额
						item.newPayableAmount = newReimburseAmount
						// 每一个的差额赋值
						item.newDifference = totalDifference

					}
				})


				// entity李的票面总金额和报销总金额就散
				// 票面总金额
				const totalFaceAmount = this.sumObjects(this.tripDetailData, 'newFaceAmount')
				// 报销总金额
				const totalReimburseAmount = this.sumObjects(this.tripDetailData, 'newReimburseAmount')
				// 计算总的应付金额 // 同时计算应付金额 = 报销总金额 + 出差补贴
				const totalPayableAmount = totalReimburseAmount + Number(this.entity.TravelAllowance ? this.entity
					.TravelAllowance : 0)
				// 赋值entity 票面总金额 
				this.entity.FaceAmount = totalFaceAmount
				// 赋值entity报销总金额
				this.entity.ReimburseAmount = totalReimburseAmount
				// 赋值entity应付金额
				this.entity.PayableAmount = totalPayableAmount
				// 应付金额赋值后实时更新大写
				const value = this.$utils.transformToUppercase(this.entity.PayableAmount)
				this.entity.Capitalization = value
				console.log('开始计算总额了', this.tripDetailData, totalFaceAmount, totalReimburseAmount, totalPayableAmount)
				console.log('计算后的entity', this.entity)
			},
			// 添加行程
			AddDetailClick() {
				console.log('添加行程了', this.entity)
				//添加行程
				uni.navigateTo({
					url: "/pages/Approval/AddDetailTrip?ReturnDate=" + this.entity.ReturnDate + '&DepartureDate=' +
						this.entity.DepartureDate
				})
			},
			// 公司选择
			CustomerChoice(value) { // 获取公司下拉列表数据
				this.dataType = ""
				this.dataType = value
				// 判断公司名称是否为空  再点击部门选择的时候
				if (value === 'DeptName') {
					if (!this.entity.CompanyName) {
						// 如果没有公司先禁用部门名称
						this.disabledDeptName = true
						this.$errorToast('请先选择公司')
						return
					}
				}
				if (value === 'CompanyName') {
					this.title = '请选择公司'
					// 获取公司下拉列表数据
					this.getCompanyDataList()
				} else {
					console.log('打开部门弹窗了', this.entity, )
					this.title = "请选择部门"
					if (this.entity.CompanyId) {
						// 获取部门下拉列表
						this.getDepartmentList('选择', this.entity.CompanyId)
					}
				}


			},
			// 获取部门列表数据
			// 底部弹窗选中事件
			changeHandler(children) {
				if (children) {
					// 如果选择公司了.打开部门名称
					this.disabledDeptName = false
				}
				// 公司和部门名称id赋值
				if (this.dataType === 'CompanyName') {
					// 重新选择公司名称  初始化部门名称和id
					this.entity.DeptName = ""
					this.entity.DepartmentId = ""
					this.$set(this.entity, "CompanyName", children.label);
					this.$set(this.entity, "CompanyId", children.value);
				} else {
					this.$set(this.entity, "DeptName", children.label);
					this.$set(this.entity, "DepartmentId", children.value);
				}

				this.$forceUpdate()
				// 隐藏底部弹窗
				this.$refs.Company.close()
			},
			//获取公司列表数据
			getCompanyDataList() {
				CompanyDataList({}).then(resJson => {
					if (resJson.Success) {
						this.columns = resJson.Data.map(item => {
							return {
								value: item.Id,
								label: item.title
							}
						})

					}
					this.$refs.Company.open(this.columns)
				})
			},
			// 获取部门下拉列表
			getDepartmentList(type, CompanyId) {
				DepartmentList({
					DeptId: CompanyId
				}).then(resJson => {
					if (resJson.Success) {
						this.columns = resJson.Data.map(item => {
							return {
								value: item.Id,
								label: item.Name
							}
						})
						// /如果是默认过来的
						if (type === '默认') {
							this.entity.DeptName = ""
							this.entity.DepartmentId = ""
							// 部门的名称和id回显
							let DeptName = this.columns.filter(item => item.value === this.UserInfo
								.UserInfo.DepartId)[0].label
							let DepartmentId = this.columns.filter(item => item.value === this.UserInfo
								.UserInfo.DepartId)[0].value
							this.$set(this.entity, 'DeptName', DeptName)
							this.$set(this.entity, 'DepartmentId', DepartmentId)
							// 强制更新
							this.$forceUpdate()
							console.log('获取部门下拉列表数据--默认-------------', this.entity, DeptName)
							return
						} else {
							// 否则走下拉选择逻辑
							this.$refs.Company.open(this.columns)
						}

					}
				})
			},
			// 提交
			onSubmit(type) {
				// 判断报销人姓名是否存在人员档案中  不存在  禁止保存和提交
				Base_UserGetExistEmployee({
					staffName: this.entity.ApplicationPerson
				}).then(resJson => {
					console.log('是否在', resJson)
					if (!resJson.Data) {
						// 说明该报销人姓名存在人员档案中 允许保存和提交
						this.$errorToast(type == 0 ? '报销人不在人员档案中，无法保存' : '报销人不在人员档案中，无法提交')
						return
					}
					// 最终提交
					this.SubmitRequest(type)

				})
				console.log('保存了', type, this.entity)
			},

			// 最终提交
			SubmitRequest(type) {

				// 点击 1.保存草稿  2  提交
				var that = this
				this.$refs.form.validate().then(res => {
					// this.resetFields()
					this.loading = true

					// 单独处理主表李的到达城市id参数
					// 出发城市
					this.entity['DepartureCity'] = this.entity.newDepartureCity

					// 单独处理行程主表的到达城市ID 和费用明细子表字段参数
					this.tripDetailData.forEach(item => {
						// 单独处理附件格式参数
						if (item.detailData.length > 0) {
							item.detailData.forEach(item => {
								// 处理出发城市  到达城市  业务性质 参数提交
								item.ArrivalCityId = item.newArrivalCityId
								item.DepartureCity = item.newDepartureCity
								item.ExpenseType = item.newExpenseType
								let Upload = []
								if (item.reimburse_Files && item.reimburse_Files.length > 0) {
									item.reimburse_Files.forEach(v => {
										// 如果是新上传的 直接放到Upload里
										if (v.fileEntity.id && !v.invoiceId) {
											delete v.invoiceId
											Upload.push(v)
										}
									})
									item.reimburse_Files = item.reimburse_Files.map(v => {
										return {
											FilePath: v.fileEntity.linkUrl
										}
									})
								}
								item.Upload = Upload

							})
						}
						// 到达城市参数id格式化
						item['ArrivalCityId'] = item.newArrivalCityId
						// 费用明细子表
						item['reimburse_Travel_Business_SubsidyDTOs'] = item.detailData

					})
					// 处理行程子表字段参数
					this.entity['reimburse_Travel_Business_ItemDTOs'] = this.tripDetailData
					this.entity['Satus'] = type

					let newEntity = JSON.parse(JSON.stringify(this.entity))
					// 差额
					newEntity['Difference'] = this.entity.Difference ? this.entity.Difference : 0
					// 票面金额
					newEntity['FaceAmount'] = this.entity.FaceAmount ? this.entity.FaceAmount : 0
					// 应付金额
					newEntity['PayableAmount'] = this.entity.PayableAmount ? this.entity.PayableAmount : 0
					// 报销金额
					newEntity['ReimburseAmount'] = this.entity.ReimburseAmount ? this.entity.ReimburseAmount : 0
					newEntity['CreatorId'] = this.UserInfo.UserInfo.CreatorId
					// newEntity['CompanyId'] = this.UserInfo.CompanyId
					newEntity['TemplateId'] = this.options.TemplateId
					console.log(
						'差旅新建--------------------------------------------------------------------------------开始i提交了',
						newEntity, this.tripDetailData)


					uni.showLoading({
						title: '加载中'
					})

					Reimburse_Travel_Business_MainSaveData(newEntity)
						.then(resJson => {
							if (resJson.Success) {
								that.$sucessToast('新建成功')
								setTimeout(function() {
									that.loading = false
									uni.navigateBack()
									uni.hideLoading()

								}, 2500)
							} else {
								that.$errorToast(resJson.Msg);
								setTimeout(function() {
									that.loading = false
									uni.navigateBack()
									uni.hideLoading()
								}, 2500)
							}

						});

				}).catch(err => {
					uni.hideLoading()
					that.loading = false
				})


			}



		}
	}
</script>

<style lang="less" scoped>
	// 覆盖uni-section 的样式uni-section
	::v-deep.uni-section {
		.uni-section-header {
			padding: 24rpx 0 !important;
		}
	}

	/* 设置 label 的样式 */
	::v-deep.uni-forms-item {
		padding-right: 40rpx !important;
		// margin-bottom: 15rpx !important;

		/* 例如，设置 label 的宽度和对齐方式 */
		.uni-forms-item__label {
			display: flex !important;
			justify-content: flex-end !important;
		}
	}

	.container {
		.scrollBox {

			margin-bottom: 130rpx;
			/* #ifdef H5 */
			height: calc(100vh - 360px);
			/* #endif */
			/* #ifdef APP */
			height: calc(100vh - 220px);
			/* #endif */

			.detail {
				width: 100%;
				margin: 0 auto;
				box-shadow: 3px 4px 16px 0px #6b6b6a;
				margin-top: 40rpx;
				margin-bottom: 10px;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 20rpx;
			}
		}

		/* 适配底部导航栏 */
		.submitButton {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 150rpx;
			/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
			height: calc(150rpx + constant(safe-area-inset-bottom));
			/* 直接扩展高度，因为padding-bottom是内边距 */
			height: calc(150rpx + env(safe-area-inset-bottom));
			/* 直接扩展高度 */
			background: #fff;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 iOS<11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容iOS>= 11.2*/
			border-top: 1px solid #e9e9e9;
			padding-left: 15px;
			padding-right: 15px;
		}
	}
</style>